<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="alternate icon" class="js-site-favicon" type="image/png" href="images/favicon.png">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/practise.css">
  <link rel="stylesheet" href="css/yuhao.css">
  <script type="text/javascript" src="js/static/jq.js"></script>
  <script type="text/javascript" src="js/static/axios.min.js"></script>
  <script type="text/javascript" src="js/static/pinyin-pro.js"></script>
  <script type="text/javascript" src="js/static/boot.js"></script>
  <link href="js/static/boot.css" rel="stylesheet">

  <script type="text/javascript" src="js/static/fontawesome-all-v6.5.1.js"></script>
  <link href="js/static/google-fonts.css" rel="stylesheet"/>
  <!--script src="https://unpkg.com/pinyin-pro"></script-->

  <script type="text/javascript" src="utils/host.js"></script>
  <script type="text/javascript" src="utils/yuhao.js"></script>
  <script type="text/javascript" src="js/storage.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
  <script type="text/javascript" src="js/dict_toy.js"></script>

  <title>卿云·打字练习</title>
</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">
        <img alt="Brand" src="images/brand.png" class="my-brand">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav module-left">
        <li><a href="index.html">首页 </a></li>
        <li><a href="study.html">新手指南</a></li>
        <li>
          <a href="#" class="dropdown-toggle color-yellow" data-toggle="dropdown" role="button"
             aria-haspopup="true" aria-expanded="false"> 练习程序<span class="caret"></span>
            <ul class="dropdown-menu">
              <li><a href="practice_light.html">光华·打字练习</a></li>
              <li><a href="practice_star.html">星陈·打字练习</a></li>
              <li><a href="practice_toy.html">卿云·打字练习</a></li>

<!--              <li><a href="game_light.html">光华·打字游戏</a></li>-->
<!--              <li><a href="game_star.html">星陈·打字游戏</a></li>-->
              <li><a href="game_toy.html">卿云·打字游戏</a></li>
              <!--
              <li><a href="practisePro.html">必拆字练习</a></li>
              <li><a href="freePractise.html">自由练习</a></li>
              -->
              <!-- <li role="separator" class="divider"></li> -->
            </ul>
          </a>
        </li>
        <li><a href="search.html">拆分查询<span class="sr-only"></span></a></li>

        <li><a href="download.html">下载安装<span class="sr-only"></span></a></li>
        <!--li><a href="tools.html">实用工具<span class="sr-only"></span></a></li-->

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">
            加入组织<span class="caret"></span></a>
          <ul class="dropdown-menu">

            <li><a href="https://jq.qq.com/?_wv=1027&k=2OYDP4Tk">宇浩官方群</a></li>
            <li><a href="https://t.me/yuhaoim">Telegram群</a></li>
            <li><a href="https://github.com/forFudan/yuhao/">Github官方仓库</a></li>

            <!-- <li role="separator" class="divider"></li> -->
          </ul>
        </li>
        <li><a href="https://kylebing.cn/tools/typepad/">玫枫跟打<span class="sr-only"></span></a></li>
      </ul>

      <!--
      <ul class="nav navbar-nav navbar-right module-right logbtn-box">
        <li><a href="login.html" class="login-btn brand-btn">登录</a></li>
        <li><a href="register.html" class="sign_up-btn brand-btn">注册</a></li>
      </ul>
      -->

      <ul class="nav navbar-nav navbar-right module-right hidden">
        <li class="hello"><span><span id="loginTime"></span>，<span id="uname"></span><span><a href="#" id="logout"> 注销</a></span></span>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- container -->
</nav>

<div class="main-content">
  <div class="container">

    <div class="row mt-10">

      <div class="col-md-2"></div>
      <div class="col-md-8 pt-20 bg-white primary-shadow study">
        <div class="h-100">
          <div class="top">
            <div class="floatleft"></div>
            <div class="floatright">
              <input type="radio" id="stage-class-root" name="stage" onchange="changeStage()" checked/><label for="stage-class-root">字根练习</label>
              <input type="radio" id="stage-class-word" name="stage" onchange="changeStage()"/><label for="stage-class-word">拆字练习</label>
              <!--input type="radio" id="stage-class-flow" name="stage" onchange="changeStage()"/><label for="stage-class-flow">跟打</label-->
              <label id="layer_keyboard4" onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-random"><span style="color: deepskyblue; ">进阶</span></label>
              <label onchange="changeErrorMode()"> <input type="checkbox" id="root-filter1-error">错题</label>
            </div>

            <div id="layer_word" class="floatright">
              <input type="radio" id="word-group-500" name="group" onchange="changeWordGroup()" checked/><label for="word-group-500">500</label>
              <input type="radio" id="word-group-1500" name="group" onchange="changeWordGroup()"/><label for="word-group-1500">-1500</label>
              <input type="radio" id="word-group-2500" name="group" onchange="changeWordGroup()"/><label for="word-group-1500">-2500</label>
              <input type="radio" id="word-group-3500" name="group" onchange="changeWordGroup()"/><label for="word-group-1500">-3500</label>
              <input type="radio" id="word-group-245" name="group" onchange="changeWordGroup()"/><label for="word-group-245">进阶必会字245</label>
            </div>

            <div id="layer_root" class="floatright">
              <label onchange="changeRootFilter1_All()"> <input type="checkbox" id="root-filter1-all">全</label>
              <!--label onchange="changeRootFilter_AllZh()"> <input type="checkbox" id="root-filter1-all-zh"> 所有简体</label-->
              <label onchange="changeRootFilter1_Top()"> <input type="checkbox" id="root-filter1-top" checked>高</label>
              <!--label onchange="changeRootFilter1_Top_Tw()"> <input type="checkbox" id="root-filter1-top-tw">高频(繁) </label-->
              <label onchange="changeRootFilter1_Other()"> <input type="checkbox" id="root-filter1-other">低</label>
              <!--label onchange="changeRootFilter1_Other_Tw()"> <input type="checkbox" id="root-filter1-other-tw"> 非高频(繁)</label-->

              <label onchange="changeRootFilter1_Simple2()"> <input type="checkbox" id="root-filter1-simple2" checked>二</label>
              <label onchange="changeRootFilter1_Simple1()"> <input type="checkbox" id="root-filter1-simple1" checked>一</label>
              <!--label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter1-simple2-tw" checked>二简(繁)</label-->
              <input type="radio" id="root-filter1-simple1-zh" name="simple1" onchange="changeRootFilter1_Simple1()" checked/><label for="root-filter1-simple1-zh">简</label>
              <input type="radio" id="root-filter1-simple1-tw" name="simple1" onchange="changeRootFilter1_Simple1()"/><label for="root-filter1-simple1-tw">繁</label>
              <input type="radio" id="root-filter1-simple1-cross" name="simple1" onchange="changeRootFilter1_Simple1()"/><label for="root-filter1-simple1-cross">通</label>
            </div>

            <div id="layer_keyboard1" class="floatright">
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-q" checked> <span style="color: orangered; ">Q</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-w" checked> <span style="color: blueviolet; ">W</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-e" checked> <span style="color: limegreen; ">E</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-r" checked> <span style="color: deepskyblue; ">R</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-t" checked> <span style="color: deepskyblue; ">T</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-y" checked> <span style="color: deeppink; ">Y</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-u" checked> <span style="color: deeppink; ">U</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-i" checked> <span style="color: limegreen; ">I</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-o" checked> <span style="color: blueviolet; ">O</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-p" checked> <span style="color: orangered; ">P</span> </label>
            </div>

            <div id="layer_keyboard2" class="floatright">
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-a" checked> <span style="color: orangered; ">A</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-s" checked> <span style="color: blueviolet; ">S</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-d" checked> <span style="color: limegreen; ">D</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-f" checked> <span style="color: deepskyblue; "><u>F</u></span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-g" checked> <span style="color: deepskyblue; ">G</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-h" checked> <span style="color: deeppink; ">H</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-j" checked> <span style="color: deeppink; "><u>J</u></span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-k" checked> <span style="color: limegreen; ">K</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-l" checked> <span style="color: blueviolet; ">L</span></label>
            </div>

            <div id="layer_keyboard3" class="floatright">
              <label onchange="changeRootFilter2_All()"> <input type="checkbox" id="root-filter2-all" checked><span style="color: orangered; ">全</span></label>

              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-x" checked> <span style="color: blueviolet; ">X</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-c" checked> <span style="color: limegreen; ">C</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-v" checked> <span style="color: deepskyblue; ">V</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-b" checked> <span style="color: deepskyblue; ">B</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-n" checked> <span style="color: deeppink; ">N</span> </label>
              <label onchange="changeRootFilter()"> <input type="checkbox" id="root-filter2-m" checked> <span style="color: deeppink; ">M</span> </label>

              <!--<label onchange="changeRootFilter2_Low()"> <input type="checkbox" id="root-filter2-low"><span style="color: limegreen; ">冷</span></label>-->
              <label id="layer_keyboard5" onchange="changeMainRoot()"> <input type="checkbox" id="main-root"><span style="color: limegreen; ">大</span></label>
<!--              <label onchange="changeMainRoot()"> <input type="checkbox" id="layer_keyboard5"><span style="color: limegreen; ">大</span></label>-->


            </div>

            <div class="floatright">
              <button type="button" onclick="showHelp()">说明</button>
              <button onclick="clearProgress()" class="btn-2 btn-info">进度重置</button>
              <span>连:<strong id="successCount" style="color: orangered; ">0</strong>&nbsp;进度:<strong id="cur" style="color: deepskyblue; ">1</strong>/<strong id="max" style="color: deepskyblue; ">1</strong>/<strong id="all"
                  style="color: deepskyblue; ">241</strong>&nbsp; 积分:<strong
                id="score" style="color: limegreen; ">0</strong></span>
            </div>

            <!--<div class="center80">-->
            <div class="floatmiddle">
              <!--<p id="root">口〇</p>-->
              <span>&nbsp;&nbsp;&nbsp;&nbsp;<strong id="root" style="color: deepskyblue; ">口〇</strong><strong id="root_type" style="font-size: 12px;">[一简]</strong></span>
              <p id="code"></p>
              <label for="input"></label><input id="input" class="form-control" style="display: inline-block;" type="text" oninput="inputChanged()">
              <p id="tip">&nbsp;&nbsp;按空格显示提示</p>
              <progress id="progress" value="1" max="241"></progress>

              <div class="color-box hidden login-color-box">
                <div class="box1-toy">
                  <div class="title">当前排名</div>
                  <div class="trank"><span class="ranknum"></span></div>
                </div>
                <div class="box2-toy">
                  <div class="title">距离上一名</div>
                  <div class="trank"><span class="diffScore"></span></div>
                </div>
                <div class="box3-toy">
                  <div class="title">目前段位</div>
                  <div class="trank"><span class="tdrww"></span></div>
                </div>
                <div class="box4-toy">
                  <div class="title">最高连击</div>
                  <div class="trank"><span class="tchi"></span></div>
                </div>
              </div>

              <div class="color-box unlogin-color-box">
                <div class="box5-toy">
                  <div id="mode-name" class="title">单机模式</div>
                  <div id="mode-error" class="trank">请先登录</div>
                </div>
              </div>

            </div>

          </div> <!-- top -->

        </div> <!-- h-100 -->

      </div>

    </div>  <!-- row mt-10 -->

    <!--div class="col-md-2"></div-->
  </div>

  <!--  +++++++++++++++++++++++++  -->
  <br><br>
  <div class="title">
    <label onchange="changeExamFold()"> <input type="checkbox" id="exam-fold">折叠&nbsp;&nbsp;</label>
    <label onchange="changeExamMode()"> <input type="checkbox" id="exam-mode">答题模式&nbsp;&nbsp;</label>
    <button class="boton" type="submit" id="button" onclick="examClear()">清空错题库</button>
  </div>

  <div class="floatright row mt-10" id="output-root">
    <div class="col-md-2"></div>
    <div class="col-md-8  bg-white primary-shadow ">
      <div class="drww-box">

        <div class="root mt-10 ">
          <div class="rank-header">
            <div class="rank-header">
              <!--
              <div class="he1">ID</div>
              <div class="he2">编码</div>
              <div id="output_root" class="he3">字根</div>
              -->
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-2"></div>
    </div>
  </div>

  <!-- +++++++++++++++++++++++++ -->
  <br><br>
  <div id="layer_rank" class="row mt-10">
    <div class="col-md-2"></div>
    <div class="col-md-8  bg-white primary-shadow ">
      <div class="drww-box">
        <div class="title"><span>宇浩名人榜</span></div>
        <div class="mini_title"><span>该排名实时刷新，每季度重置一次。</span></div>
        <div class="rank mt-10 ">
          <div class="rank-header">
            <div class="he1">排名</div>
            <div class="he2">昵称</div>
            <div class="he3">分数</div>
            <div class="he3">连击</div>
            <div class="he4">段位</div>
            <div class="he5">方案</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-2"></div>
  </div>
  <!--  +++++++++++++++++++++++++  -->

</div>

<div class="footer hidden visible-lg">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <img src="images/brand.png" alt="helloworld综合资源web服务" class="my-brand1">
      <p class="footer-title1">宇浩输入法 </p>
    </div>

    <div class="col-xs-12 col-md-4">
      <ul class="rec-list flex-col">
        <li><span class="footer-title">友情链接</span></li>
        <li><a href="https://rime.im/">RIME输入法(PC)</a></li>
        <li><a href="https://github.com/EasyIME/PIME/releases">PIME输入法(RIME的WIN10优化版)</a></li>
        <li><a href="https://fcitx5-android.github.io">小企鹅输入法(手机)</a></li>
        <li><a href="https://github.com/osfans/trime">同文输入法(手机)</a></li>
        <li><a href="https://www.jsxiaoshi.com/">极速打字网</a></li>
      </ul>
    </div>

    <div class="col-xs-12 col-md-4">
      <ul class="about-list flex-col">
        <li><span class="footer-title">关于</span></li>
        <li><a href="#">关于宇浩码</a></li>
        <li><a href="#">关于作者</a></li>
      </ul>
    </div>

  </div>
</div>


<script src="js/root_toy.js"></script>
<script src="js/root_init.js"></script>
<script src="js/practice.js"></script>
<script id="allow-copy_script">(function e() {
  let e = !1;
  document.addEventListener("allow_copy", (function (t) {
    e = t.detail.unlock
  }));
  let t = ["copy", "cut", "contextmenu", "selectstart", "mousedown", "mouseup", "mousemove", "keydown", "keypress", "keyup"];
  let n = function (t) {
    e && (t.stopPropagation(), t.stopImmediatePropagation && t.stopImmediatePropagation());
  };
  t.forEach((function (e) {
    document.documentElement.addEventListener(e, n, {capture: !0});
  }));
})();
</script>

<div class="showOnLog">
  <div class="full-screen">
    <div class="message-box">
      <h2>入门须知</h2>
      <div class="content">
        <div>1. 不建议看着字根图打！</div>
        <div>2. 输入正确会跳下一个</div>
        <div>3. 输入错很快重复出现</div>
        <div>4. 三秒内想不起来按空格出提示</div>
      </div>
      <div class="btn-area">
        <div>

          <input type="checkbox" name="isLog" id="islog">
          <label for="islog">下次不再提醒</label>
        </div>
        <button class="btn btn-info" id="log-submit">确定</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>
